<template>
	<view>
		<view class="topSearch">
			<u-search placeholder="输入企业名称" :showAction="false" v-model="keyword"></u-search>
		</view>
		<!-- 个人章显示 -->
		<view class="personSeal">
			<uni-section title="个人印章" titleFontSize="15px" type="line" padding></uni-section>
			<view class="personSealItem"> 
				<view class="personSealConcrete" v-for="(item, index) in personSealForm">
					<view class="personSealCard">
						<image class="sealpersonImage" mode="aspectFill"   :src="item.sealPath"></image>
						<text class="sealNameText">{{item.sealName}}</text>
					</view>
				</view>
				
			</view>
		</view>
		<!-- 企业章显示 -->
		<view class="companySeal">
			<uni-section class="companyTitle" titleFontSize="15px" title="企业印章" type="line" padding></uni-section>
			<view class="companySealItem">
				<view class="companySealConcrete" v-for="(item, index) in companySealForm">
					<view class="companyCard">
						<image class="companyImage" mode="aspectFill"   :src="item.sealPath"></image>
						<text class="sealNameText">{{item.sealName}}</text>
					</view>
				</view>
				<!-- <view class="companySealConcrete">
					<uni-card :cover="cover" @click="onClick">
					<image class="companyImage" slot='cover' style="width: 100%;" :src="cover"></image>
					<text class="uni-body">个人章</text>
					</uni-card>
				</view> -->
				<!-- <view class="companySealConcrete">
					<uni-card :cover="cover" @click="onClick">
					<image class="companyImage" slot='cover' style="width: 100%;" :src="cover"></image>
					<text class="uni-body">个人章</text>
					</uni-card>
				</view>
				<view class="companySealConcrete">
					<uni-card :cover="cover" @click="onClick">
					<image class="companyImage" slot='cover' style="width: 100%;" :src="cover"></image>
					<text class="uni-body">个人章</text>
					</uni-card>
				</view>
				<view class="companySealConcrete">
					<uni-card :cover="cover" @click="onClick">
					<image class="companyImage" slot='cover' style="width: 100%;" :src="cover"></image>
					<text class="uni-body">个人章</text>
					</uni-card>
				</view>
				<view class="companySealConcrete">
					<uni-card :cover="cover" @click="onClick">
					<image class="companyImage" slot='cover' style="width: 100%;" :src="cover"></image>
					<text class="uni-body">个人章</text>
					</uni-card>
				</view> -->
			</view>
		</view>
		<!-- 底部添加印章的按钮 -->
		<view class="bottomButton">
			<view class="bottomButtonGroup">
				<u-button type="primary" icon="account" shape="circle"  text="添加个人印章"></u-button>
				<u-button type="primary" icon="home" shape="circle"  text="添加企业印章"></u-button>
			</view>
		</view>
		
	</view>
</template>

<script>
	import http from '../../utils/request.js'
	export default {
		data() {
			return {
				// cover: "https://s11.ax1x.com/2024/01/08/pFSOdZq.jpg",
				// cover: "https://contract-seal.oss-cn-chengdu.aliyuncs.com/20231020/6a784caaa6f74071863ee6c3cc639793.png",
				dataForm: {
					id: ""
				},
				keyword: "",
				// 个人的印章数组
				personSealForm: [],
				// 企业的印章数组
				companySealForm: []
			}
	
		},
		created() {
			this.getSeal();
		},
		computed: {
			
		},
		methods: {
			// 获取用户创建的印章
			async getSeal() {
				const response = await this.$api.my.getSeal(this.dataForm)
				console.log('数据结果', response)
				let sealForm = response.data.data.list;
				// 使用reduce方法进行分割
				let [personSealForm, companySealForm] = sealForm.reduce(([personSealForm, companySealForm], sealFormItem) => {
				  if (sealFormItem.sealName.includes("公司")) {
				    companySealForm.push(sealFormItem);
				  } else {
				    personSealForm.push(sealFormItem);
				  }
				  return [personSealForm, companySealForm];
				}, [[], []]);
				this.personSealForm = personSealForm;
				this.companySealForm = companySealForm
				console.log(this.personSealForm[0].sealPath)

			}
			
		}
	}
</script>

<style scoped> 
	page {
		backgroundColor: #ffffff;
	}
	/deep/ .u-button--primary[data-v-2bf0e569] {
		width: 340rpx;
		height: 80rpx;
	}
	.bottomButtonGroup {
		box-sizing: border-box;
		padding: 10rpx;
		display: flex;
		flex-direction: row;
	}
	.bottomButton {
		position: fixed;
		bottom: 0;
		width: 750rpx;
		height: 100rpx;
		background-color: #ffffff;
	}
	.topSearch {
		/* margin-bottom: 40rpx; */
	}
	.personSeal {
		width: 750rpx;
	}
	.companySeal {
		width: 750rpx;
		margin-bottom: 100rpx
	}
	.companySealItem {

		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;  // 替代原先的space-between布局方式
		margin-bottom: 10rpx;
		padding: 20rpx;
		box-sizing: border-box;
		
	}
	.companySealConcrete {
		height: 212rpx;
		width: 340rpx;
		margin-bottom: 40rpx;
		background-color: #ffffff;
		 /* 边框阴影样式 */
		box-shadow: 
		    0 4px 6px rgba(0, 0, 0, 0.1), /* 下方偏移4px的浅阴影 */
		    0 8px 32px rgba(188, 188, 188, 0.1); /* 下方偏移8px的深阴影，营造立体感 */
		  
		  /* 圆角边框 */
		border-radius: 8rpx; /* 可以根据需求调整圆角大小 */
		color: #323232;  
	}
	.personSealItem {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between; // 替代原先的space-between布局方式
		margin-bottom: 10rpx;
		padding: 20rpx;
		box-sizing: border-box;
	}
	.personSealConcrete {
		height: 212rpx;
		width: 340rpx;
		margin-bottom: 40rpx;
		background-color: #ffffff;
		 /* 边框阴影样式 */
		box-shadow: 
		    0 4px 6px rgba(0, 0, 0, 0.1), /* 下方偏移4px的浅阴影 */
		    0 8px 32px rgba(188, 188, 188, 0.1); /* 下方偏移8px的深阴影，营造立体感 */
		  
		  /* 圆角边框 */
		border-radius: 8rpx; /* 可以根据需求调整圆角大小 */
		color: #323232;  
	}
	.personSealCard {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		height: 100%;
	}
	.personSealConcrete .personSealCard .sealpersonImage {
		width: 90%;
		height: 90%;
	}
	.companyCard {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		height: 100%;
	}
	.companySealConcrete .companyCard .companyImage {
		width: 90%;
		height: 90%;
	}
	
	
	.companySealConcrete  .sealNameText {
		width: 300rpx;
		/* 防止文本容器收缩以适应空间 */
		white-space: nowrap; /* 禁止文本换行 */
		overflow: hidden; /* 超出部分隐藏 */
		text-overflow: ellipsis; /* 当文本溢出时用省略号代替 */
	}
	
	

	/deep/ .companySeal .uni-section .uni-section-header__decoration[data-v-f7ca1098] {
		background-color: #cc272a;
	}
	/deep/ .uni-section[data-v-f7ca1098] {
		height: 90rpx;
	}
	
</style>